<template>
  <div>
    <div id="cb-container" class="cb-banner">
      <section class="box ">
        <div class="cb-banner-section">
          <ul class="cb-texts">
            <p>人生沧桑十万年</p>
            <p>半生清醒半疯癫</p>
            <p>直望苍天不躬身</p>
            <p>临终遗赠成乱源</p>
          </ul>
          <div class="cb-avatar"><a href="#"><span>烂命华</span></a></div>
        </div>
      </section>
    </div>
    <article>
      <h2 class="cb-title-tj">
        <p>文案<span>推荐</span></p>
      </h2>
      <!--左侧-->
      <div class="cb-bloglist left">
        <div>
          <h3>语录</h3>
          <h4>俗话说，红颜祸水。</h4>
            <h4>一位美人，不是那么好追求的。</h4>
              <h4>只有单纯的人，才想着只用爱情和感动，就能征服一个美人。</h4>
                <h4>其实远远不止这些。</h4>
                  <h4>女人的美丽，就是天然的嫁妆。</h4>
                    <h4>这笔嫁妆丰厚至极，是一大笔的财富。</h4>
                      <h4>谁不想获得这样的财富？</h4>
                        <h4>但不是谁都有能力守护得住这样的财富。</h4>
                          <h4>如果有美人，愿意因为单纯的爱情，而将这笔财富交给另一半。那么就请幸运儿好好对待吧。</h4>
                            <h4>但事实上，这种情况太少太少。</h4>
                              <h4>如果有就请珍惜，如果没有，也不要奢望。</h4>
                                <h4>不要说“俗”。</h4>
                                  <h4>因为这就是，现实</h4>
        </div>
      </div>
      <!--右侧 天气-->
      <aside class="right">
        <div class="cb-weather">
          <iframe width="300" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="https://i.tianqi.com/index.php?c=code&id=12&icon=1&num=1"></iframe>
        </div>
        <div class="cb-news">
          <h3>
            <p>学习<span>文章</span></p>
          </h3>
          <ul class="cb-rank">
            <li><a href="https://cn.vuejs.org/guide/quick-start.html">Vue.js快速上手</a></li>
            <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript 基础</a></li>
            <li><a href="https://nuxt.com.cn/docs/getting-started/introduction/">Nuxt开发指南</a></li>
          </ul>
        </div>
      </aside>
    </article>
  </div>
</template>

<script>
  import banner from '../../assets/js/banner'
  export default {
    data() {
      return {
        articles: ''
      }
    },
    created(){
    },
    methods:{
    },
    mounted(){
      banner.action();

    }
  }
</script>

<style scoped>

  .cb-banner{
    width: 100%;
    height: 260px;
    overflow:hidden;
  }
  .cb-banner-section{
    position: absolute;
    width: 1000px;
    z-index: 1;

  }
  .cb-texts{
    width: 400px;
    line-height: 40px;
    float: left;
    margin: 60px 160px;
    font-size: 20px;
    color: #70DBDB;
  }
  .cb-texts p{
    -webkit-transform: translate(60px);
    -moz-transform: translate(60px);
    -ms-transform: translate(60px);
    -o-transform: translate(60px);
    transform: translate(60px);
  }
  .cb-texts p:nth-child(1){
    /*3s慢慢出来，然后1s向后退*/
    -webkit-animation: animations 3s ease-out 1s backwards;
    -moz-animation: animations 3s ease-out 1s backwards;
    -o-animation: animations 3s ease-out 1s backwards;
    animation: animations 3s ease-out 1s backwards;
  }
  .cb-texts p:nth-child(2){
    /*3s慢慢出来，然后1s向后退*/
    -webkit-animation: animations 3s ease-out 4s backwards;
    -moz-animation: animations 3s ease-out 4s backwards;
    -o-animation: animations 3s ease-out 4s backwards;
    animation: animations 3s ease-out 4s backwards;
  }
  .cb-texts p:nth-child(3){
    /*5s闪出，然后1s向后退*/
    -webkit-animation: animations1 5s ease-in-out 7s backwards;
    -moz-animation: animations1 5s ease-in-out 7s backwards;
    -o-animation: animations1 5s ease-in-out 7s backwards;
    animation:  animations1 5s ease-in-out 7s backwards;
  }
  .cb-texts p:nth-child(4){
    /*5s闪出，然后1s向后退*/
    -webkit-animation: animations1 8s ease-in-out 10s backwards;
    -moz-animation: animations1 8s ease-in-out 10s backwards;
    -o-animation: animations1 8s ease-in-out 10s backwards;
    animation:  animations1 8s ease-in-out 10s backwards;
  }

  @-webkit-keyframes animations{
    0%{-webkit-transform: translate(0);opacity: 0}
    50%{-webkit-transform: translate(30px);opacity: .5}
    100%{-webkit-transform: translate(60px);opacity: 1}
  }
  @-moz-keyframes animations{
    0%{-webkit-transform: translate(0);opacity: 0}
    50%{-webkit-transform: translate(30px);opacity: .5}
    100%{-webkit-transform: translate(60px);opacity: 1}
  }
  @-o-keyframes animations{
    0%{-webkit-transform: translate(0);opacity: 0}
    50%{-webkit-transform: translate(30px);opacity: .5}
    100%{-webkit-transform: translate(60px);opacity: 1}
  }
  @keyframes animations{
    0%{-webkit-transform: translate(0);opacity: 0}
    50%{-webkit-transform: translate(30px);opacity: .5}
    100%{-webkit-transform: translate(60px);opacity: 1}
  }

  /*第三行动画*/
  @-webkit-keyframes animations1{
    0%{opacity: 0}
    40%{opacity: .8}
    45%{opacity: .3}
    55%{opacity: .8}
    60%{opacity: .3}
    100%{opacity: 1}
  }
  @-moz-keyframes animations1{
    0%{opacity: 0}
    40%{opacity: .8}
    45%{opacity: .3}
    55%{opacity: .8}
    60%{opacity: .3}
    100%{opacity: 1}
  }
  @-o-keyframes animations1{
    0%{opacity: 0}
    40%{opacity: .8}
    45%{opacity: .3}
    55%{opacity: .8}
    60%{opacity: .3}
    100%{opacity: 1}
  }
  @keyframes animations1{
    0%{opacity: 0}
    40%{opacity: .8}
    45%{opacity: .3}
    55%{opacity: .8}
    60%{opacity: .3}
    100%{opacity: 1}
  }

  /*头像*/
  .cb-avatar{
    float: right;
    margin: 40px;
    width: 130px;
    height: 130px;
    overflow: hidden;
    border-radius: 100%;
  }
  .cb-avatar a{
    display: block;
    padding-top: 97px;
    width: 130px;
    background: url(../../../static/Park3Med/微信图片_20240623145445.jpg) no-repeat;
    background-size: 130px 130px;
  }
  .cb-avatar a span{
    display: block;
    width: 130px;
    height: 55px;
    margin-top: 63px;
    padding-top: 8px;
    text-align: center;
    color: #fff;
    background-color: rgba(0,0,0,.5);
    -webkit-transition: .2s ease-in-out margin-top;
    -moz-transition: .2s ease-in-out margin-top;
    -o-transition: .2s ease-in-out margin-top;
    transition: .2s ease-in-out margin-top;
  }

  .cb-avatar a:hover span {
    display: block;
    margin-top: 0px;
  }

  /*文章推荐*/
  h2.cb-title-tj{
    font: 18px "微软雅黑",Arial, Helvetica,sans-serif;
    color: #444;
    font-weight: bold;

  }
  h2.cb-title-tj span{color: #fe5187}
  h2.cb-title-tj p{
    background-color: #fff;
    width: 90px;
  }
  .cb-bloglist{
    width: 740px;
    min-height: 765px;
    overflow: hidden;
    background: url(../../assets/images/r_line.jpg) repeat-y right;
  }
  .cb-bloglist h3{
    margin: 20px 0px 10px 0px;
    color: #333;
    font: 15px '微软雅黑',Arial,Helvetica,sans-serif;
    font-weight: bold;
  }
  .cb-bloglist figure{
    width: 183px;
    float: left;
  }
  .cb-bloglist figure img{
    width: 175px;
    padding: 4px;
    border: solid 1px #f4f2f2;
  }
  .cb-bloglist ul{
    position: relative;
    float: left;
    width: 520px;
    margin: 10px 0px 0px 15px;
    display: block;
  }
  .cb-bloglist-art{
    height: 70px;
    overflow: hidden;
  }
  .cb-boli{
    width: 520px;
    height: 10px;
    /*background-color:rgba(0.1,0.1,0.1,0.1);*/
    position: absolute;
    bottom: 54px;
    background:#ffffff  center bottom fixed;/* 与上面的bg中的background设置一样 */
    filter: blur(1px);/* 值越大越模糊 */
  }
  .cb-weather{
    background: url(../../assets/images/weather_bg.jpg) no-repeat;
    height: 88px;
    margin: 20px 0;
    padding: 20px 0px 0px 75px;

  }



</style>
